<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            font-size: 24px;
            height: 50px;
            line-height: 50px;
            margin: 0 auto;
            width: 800px;
            text-align: center;
        }

        h1 {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>倒计时</h1>
    <div id="box"> </div>

    <script>
        //new Date() 时间内置对象
        var box = document.getElementById("box"); //根据id获取节点
        setInterval(clock, 1000); //设定一个定时器，括号内放入倒计时的函数体，每过1秒就调用一次函数

        clock(); //页面刷新默认调用一次倒计时函数
        function clock() {
            var oldDate = new Date("2022/8/24 14:00:00"); //获取自定义时间的时间戳
            var newDate = new Date(); //获取当前的时间戳

            var second = parseInt((oldDate.getTime() - newDate.getTime()) / 1000); //获取自定义时间与当前时间的秒数差（毫秒/1000后为秒）

            var d = parseInt(second / 24 / 60 / 60); //将获取的秒数差转为天数差
            var h = parseInt(second / 60 / 60 % 24); //将获取的秒数差转为余下的小时
            var m = parseInt(second / 60 % 60); //将获取的秒数差转为余下的分钟
            var s = parseInt(second % 60); //将获取的秒数差转为余下的秒数

            //判断当前数字是否大于10，不大于10则在前面加上字符串0
            d = d >= 10 ? d : '0' + d;
            h = h >= 10 ? h : '0' + h;
            m = m >= 10 ? m : '0' + m;
            s = s >= 10 ? s : '0' + s;

            //修改box节点的内容
            box.innerHTML = "距离24号: " + d + "天" + h + "小时" + m + "分钟" + s + "秒"
        }
    </script>
</body>

</html>